<template>
  <el-drawer
    v-model="drawerVisible"
    :size="650"
    :title="titleMap[mode]"
    @closed="$emit('closed')"
    append-to-body
  >
    <el-container v-loading="saveLoading">
      <el-main>
        <el-form
          :model="form"
          :rules="rules"
          ref="saveForm"
          label-width="140px"
        >
          <el-card class="elCard" style="margin-bottom: 10px">
            <el-form-item label="企业名称" prop="enterprise.name">
              {{ form.enterprise.name }}
            </el-form-item>
            <el-form-item
              label="统一社会信用代码"
              prop="enterprise.unifiedCode"
            >
              {{ form.enterprise.unifiedCode }}
            </el-form-item>
            <el-form-item label="企业属地" prop="enterprise.block">
              {{ form.enterprise.block }}
              <el-button
                style="margin-left: 10px"
                @click="
                  reportBlock(
                    form.enterprise.id,
                    form.enterprise.name,
                    form.enterprise.block
                  )
                "
                >属地错误</el-button
              >
            </el-form-item>
            <el-form-item label="注册地址" prop="enterprise.address">
              {{ form.enterprise.address }}
            </el-form-item>
            <el-form-item label="注册日期" prop="enterprise.regDate">
              {{ form.enterprise.regDate }}
            </el-form-item>
            <el-form-item label="联系电话" prop="enterprise.contactNumber">
              {{ form.enterprise.contactNumber }}
            </el-form-item>
            <el-form-item label="缴纳社保信息" prop="enterprise.insrcInfo">
              {{ form.enterprise.insrcInfo }}
            </el-form-item>

            <el-form-item label="缴纳人数" prop="enterprise.personCount">
              {{ form.enterprise.personCount }}
            </el-form-item>
          </el-card>

          <el-row>
            <el-col :span="12">
              <el-form-item label="摸查情况" prop="status">
                <hh-dict
                  v-model="form.status"
                  dictType="interview_status"
                  placeholder="请选择摸查情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否重点企业" prop="keyEnterprises">
                <hh-dict
                  v-model="form.keyEnterprises"
                  dictType="enterprise_situation"
                  placeholder="请选择是否重点企业"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用工情况" prop="employmentStatus">
                <hh-dict
                  v-model="form.employmentStatus"
                  dictType="employment_status"
                  placeholder="请选择用工情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用工人数" prop="employeeCount">
                <el-input
                  v-model="form.employeeCount"
                  placeholder="请输入用工人数"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用工计划" prop="employmentPlay">
                <hh-dict
                  v-model="form.employmentPlay"
                  dictType="plan"
                  placeholder="请选择用工计划"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经营情况" prop="opStatus">
                <hh-dict
                  v-model="form.opStatus"
                  dictType="op_status"
                  placeholder="请选择经营情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input
                  v-model="form.contact"
                  placeholder="请输入联系人"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="contactPhone">
                <el-input
                  v-model="form.contactPhone"
                  placeholder="请输入联系人电话"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="企业办公地址" prop="officeAddress">
            <el-input
              v-model="form.officeAddress"
              placeholder="请输入企业办公地址"
              clearable
            ></el-input>
          </el-form-item>

          <div class="subTitle">
            <span>服务需求</span>
          </div>

          <el-row>
            <el-col :span="5">
              <el-form-item label="用工指导" prop="employmentGuidance">
                <el-checkbox
                  v-model="form.employmentGuidance"
                  true-label="是"
                  false-label="否"
                ></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="技能培训" prop="skillsTraining">
                <el-checkbox
                  v-model="form.skillsTraining"
                  true-label="是"
                  false-label="否"
                ></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="政策支持" prop="policySupport">
                <el-checkbox
                  v-model="form.policySupport"
                  true-label="是"
                  false-label="否"
                ></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="其他" prop="other">
                <el-checkbox
                  v-model="form.other"
                  true-label="是"
                  false-label="否"
                ></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <div class="form-footer">
          <el-button type="" @click="close">取消</el-button>
          <el-button
            v-show="this.form.status == '已联系'"
            type="primary"
            @click="submit"
            >提交</el-button
          >
          <el-popconfirm
            title="摸查情况非已联系，确定提交当前页面？"
            @confirm="submit"
          >
            <template #reference>
              <el-button v-show="this.form.status != '已联系'" type="primary"
                >提交</el-button
              >
            </template>
          </el-popconfirm>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>

  <report-block-dialog
    ref="reportBlockDialog"
    v-if="dialog.reportBlock"
    @onRefresh="onRefresh"
    @closed="dialog.reportBlock = false"
  ></report-block-dialog>
</template>

<script>
import reportBlockDialog from "./reportBlock";

export default {
  name: "enterpriseInfo-save",
  emits: ["success", "closed"],
  components: {
    reportBlockDialog,
  },
  data() {
    return {
      saveLoading: false,
      drawerVisible: false,
      mode: "add",
      dialog: {
        reportBlock: false,
      },
      titleMap: {
        // add: "新增企业",
        edit: "企业填报",
      },
      tip: "添加成功",
      form: {
        id: "",
        personCount: null,
        employeeCount: null,
        employmentPlay: "",
        opStatus: "",
        employmentStatus: "",
        insrcInfo: "",
        status: "",
        contact: "",
        officeAddress: "",
        contactPhone: "",
        keyEnterprises: "",

        employmentGuidance: "",
        skillsTraining: "",
        policySupport: "",
        other: "",

        enterprise: {},
      },
      rules: {
        // employmentPlay: [{ required: true, message: "请输入企业名称" }],

        employeeCount: [
          {
            pattern: /^(0|\+?[1-9][0-9]*)$/,
            message: "请输入正确的用工人数",
            trigger: "blur",
          },
        ],
        employmentPlay: [
          {
            validator: async (rule, value, callback) => {
              let result = await this.checkDict(value, "plan");
              if (result == 0) callback(new Error("请选择用工计划"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        opStatus: [
          {
            validator: async (rule, value, callback) => {
              let result = await this.checkDict(value, "op_status");
              if (result == 0) callback(new Error("请选择经营情况"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        employmentStatus: [
          {
            validator: async (rule, value, callback) => {
              let result = await this.checkDict(value, "employment_status");
              if (result == 0) callback(new Error("请选择用工情况"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        keyEnterprises: [
          {
            validator: async (rule, value, callback) => {
              let result = await this.checkDict(value, "enterprise_situation");
              if (result == 0) callback(new Error("请选择是否重点企业"));
              else callback();
            },
            trigger: "blur",
          },
        ],

        status: [
          { required: true, message: "请选择摸查情况" },
          {
            validator: async (rule, value, callback) => {
              let result = await this.checkDict(value, "interview_status");
              if (result == 0) callback(new Error("请选择摸查情况"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        contact: [{ min: 0, max: 200, message: "请勿超过200字" }],
        contactPhone: [
          {
            pattern:
              /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
            message: "请输入正确的联系电话",
            trigger: "blur",
          },
        ],
        officeAddress: [{ min: 0, max: 200, message: "请勿超过200字" }],
      },
    };
  },
  watch: {
    "form.status"(val) {
      if (val == "已联系" && this.form.opStatus == "正常经营") {
        this.rules = {
          employeeCount: [
            { required: true, message: "请输入用工人数" },
            {
              pattern: /^(0|\+?[1-9][0-9]*)$/,
              message: "请输入正确的用工人数",
              trigger: "blur",
            },
          ],
          employmentPlay: [
            { required: true, message: "请输入用工计划" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "plan");
                if (result == 0) callback(new Error("请选择用工计划"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          opStatus: [
            { required: true, message: "请输入经营情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "op_status");
                if (result == 0) callback(new Error("请选择经营情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          employmentStatus: [
            { required: true, message: "请输入用工情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "employment_status");
                if (result == 0) callback(new Error("请选择用工情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],

          contact: [
            { required: true, message: "请输入联系人" },
            { min: 0, max: 200, message: "请勿超过200字" },
          ],
          contactPhone: [
            { required: true, message: "请输入联系电话" },
            {
              pattern:
                /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
              message: "请输入正确的联系电话",
              trigger: "blur",
            },
          ],
          officeAddress: [
            { required: true, message: "请输入企业办公地址" },
            { min: 0, max: 200, message: "请勿超过200字" },
          ],
          keyEnterprises: [
            { required: true, message: "请选择是否重点企业" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(
                  value,
                  "enterprise_situation"
                );
                if (result == 0) callback(new Error("请选择是否重点企业"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          status: [
            { required: true, message: "请选择摸查情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "interview_status");
                if (result == 0) callback(new Error("请选择摸查情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
        };
      } else {
        this.rules = {
          employeeCount: [
            {
              pattern: /^(0|\+?[1-9][0-9]*)$/,
              message: "请输入正确的用工人数",
              trigger: "blur",
            },
          ],
          employmentPlay: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "plan");
                if (result == 0) callback(new Error("请选择用工计划"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          opStatus: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "op_status");
                if (result == 0) callback(new Error("请选择经营情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          employmentStatus: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "employment_status");
                if (result == 0) callback(new Error("请选择用工情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          keyEnterprises: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(
                  value,
                  "enterprise_situation"
                );
                if (result == 0) callback(new Error("请选择是否重点企业"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          status: [
            { required: true, message: "请选择摸查情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "interview_status");
                if (result == 0) callback(new Error("请选择摸查情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          contact: [{ min: 0, max: 200, message: "请勿超过200字" }],
          contactPhone: [
            {
              pattern:
                /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
              message: "请输入正确的联系电话",
              trigger: "blur",
            },
          ],
          officeAddress: [{ min: 0, max: 200, message: "请勿超过200字" }],
        };
      }
    },
    "form.opStatus"(val) {
      if (val != "正常经营" && this.form.status == "已联系") {
        this.rules = {
          employeeCount: [
            {
              pattern: /^(0|\+?[1-9][0-9]*)$/,
              message: "请输入正确的用工人数",
              trigger: "blur",
            },
          ],
          employmentPlay: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "plan");
                if (result == 0) callback(new Error("请选择用工计划"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          opStatus: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "op_status");
                if (result == 0) callback(new Error("请选择经营情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          employmentStatus: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "employment_status");
                if (result == 0) callback(new Error("请选择用工情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],

          contact: [{ min: 0, max: 200, message: "请勿超过200字" }],
          contactPhone: [
            {
              pattern:
                /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
              message: "请输入正确的联系电话",
              trigger: "blur",
            },
          ],
          officeAddress: [{ min: 0, max: 200, message: "请勿超过200字" }],
          keyEnterprises: [
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(
                  value,
                  "enterprise_situation"
                );
                if (result == 0) callback(new Error("请选择是否重点企业"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          status: [
            { required: true, message: "请选择摸查情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "interview_status");
                if (result == 0) callback(new Error("请选择摸查情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
        };
        this.form.keyEnterprises = "一般企业";
        this.form.employmentStatus = "无";
        this.form.employeeCount = "";
        this.form.employmentPlay = "无";
      }
      if (val == "正常经营" && this.form.status == "已联系") {
        this.rules = {
          employeeCount: [
            { required: true, message: "请输入用工人数" },
            {
              pattern: /^(0|\+?[1-9][0-9]*)$/,
              message: "请输入正确的用工人数",
              trigger: "blur",
            },
          ],
          employmentPlay: [
            { required: true, message: "请输入用工计划" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "plan");
                if (result == 0) callback(new Error("请选择用工计划"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          opStatus: [
            { required: true, message: "请输入经营情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "op_status");
                if (result == 0) callback(new Error("请选择经营情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          employmentStatus: [
            { required: true, message: "请输入用工情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "employment_status");
                if (result == 0) callback(new Error("请选择用工情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],

          contact: [
            { required: true, message: "请输入联系人" },
            { min: 0, max: 200, message: "请勿超过200字" },
          ],
          contactPhone: [
            { required: true, message: "请输入联系电话" },
            {
              pattern:
                /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
              message: "请输入正确的联系电话",
              trigger: "blur",
            },
          ],
          officeAddress: [
            { required: true, message: "请输入企业办公地址" },
            { min: 0, max: 200, message: "请勿超过200字" },
          ],
          keyEnterprises: [
            { required: true, message: "请选择是否重点企业" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(
                  value,
                  "enterprise_situation"
                );
                if (result == 0) callback(new Error("请选择是否重点企业"));
                else callback();
              },
              trigger: "blur",
            },
          ],
          status: [
            { required: true, message: "请选择摸查情况" },
            {
              validator: async (rule, value, callback) => {
                let result = await this.checkDict(value, "interview_status");
                if (result == 0) callback(new Error("请选择摸查情况"));
                else callback();
              },
              trigger: "blur",
            },
          ],
        };
      }
    },
  },
  mounted() {},
  methods: {
    //打开
    open(mode = "add") {
      this.mode = mode;
      this.drawerVisible = true;
      return this;
    },
    //修改
    async edit(id) {
      this.tip = "修改成功";
      this.drawerVisible = true;
      this.saveLoading = true;
      let params = { id: id };
      let res = await this.$API.enterpriseInfo.details.get(params);
      if (res.code == 0) {
        this.form = res.data;
        this.saveLoading = false;
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //提交
    submit() {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          this.form.enterpriseId = this.form.enterprise.id;
          let res = await this.$API.enterpriseInfo.save.post(this.form);
          if (res.code == 0) {
            this.$message.success(this.tip);
            //调用父类刷新
            this.$emit("onRefresh");
            this.drawerVisible = false;
          } else {
            let errdata = this.$TOOL.response(res);
            this.$alert(
              this.$TOOL.json.get("", errdata, "message"),
              this.$TOOL.json.get("", errdata, "title"),
              {
                type: "error",
                confirmButtonText: "确定",
                dangerouslyUseHTMLString: true,
                showCancelButton: false,
              }
            );
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
    //检测字典
    async checkDict(dictName, dictType) {
      let params = {
        dictName: dictName,
        dictType: dictType,
      };
      let res = await this.$API.dict.list.get(params);
      return res.data.length;
    },
    //上报属地错误
    reportBlock(id, name, block) {
      this.dialog.reportBlock = true;
      this.$nextTick(() => {
        this.$refs.reportBlockDialog.report(id, name, block);
      });
    },
  },
};
</script>

<style scoped>
.elCard:deep(.el-card__body) {
  padding-top: 15px;
  padding-bottom: 0px;
}
</style>
